<template>
<div class="stockOpe">
  <div class="header">
    <span class="line"></span>
    <div class="text">股票操作</div>
    <span class="line"></span>
  </div>
  <div class="stockContent" v-show='isExhibition'>
    <div class="stockCharts">
      <div ref="mChartLeft" style="width:50%;height:160px" class="fl">
      </div>
      <div ref="mChartRight" style="width:50%;height:160px" class="fr">
      </div>
    </div>
    <div class="describe">
      <div class="left">超过<span v-text='positionIndex'></span>股民</div>
      <div class="right">超过<span v-text='retracementMaxIndex'></span>股民</div>
    </div>
  </div>
  <return-empty v-show='isEmpty'></return-empty>
  <return-error v-show='isError'></return-error>
</div>
</template>
<script>
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/tooltip'
import RemoteDAO from '@/common/remoteDAO'

const myOpe = {
  tooltip: {
    show: false,
    trigger: 'axis',
    showContent: false
  },
  calculable: false,
  color: ['#ddd', '#ff7c00'],
  series: [{
    type: 'pie',
    radius: ['70%', '75%'],
    clockwise: false,
    label: {
      normal: {
        show: true,
        position: 'center',
        textStyle: {
          fontSize: 20
        }
      },
      silent: true
    }
  }]
}

export default {
  props: ['fathertime'],
  data() {
    return {
      positionIndex: '',
      retracementMaxIndex: '',
      myChartLeft: '',
      myChartRight: '',
      isEmpty: '',
      isError: '',
      isExhibition: 'true'
    }
  },
  created() {
    this.initStock();
  },
  beforDestroy() {
    echarts.dispose(this.myChartLeft)
    echarts.dispose(this.myChartRight)
  },
  watch: {
    fathertime: function() {
      this.initStock();
    }
  },
  methods: {
    error() {
      this.isError = 'true'
      this.isEmpty = ''
      this.isExhibition = ''
    },
    empty() {
      this.isError = ''
      this.isEmpty = 'true'
      this.isExhibition = ''
    },
    exhibition() {
      this.isError = ''
      this.isEmpty = ''
      this.isExhibition = 'true'
    },
    initStock() {
      let vm = this;
      if(vm.fathertime){
        let obj0043 = {
          "recent": vm.fathertime
        };
        RemoteDAO.callZL13100043(obj0043, vm.ZL13100043);
      }
    },
    ZL13100043(result) {
      let vm = this;
      if (result.error == '1') {
        vm.error()
      } else {
        let data = result.data;
        let bigdata = JSON.parse(data).body[0].bigdata;
        let specData = JSON.parse(bigdata).hits.hits;
        if (specData.length == 0) {
          vm.empty()
        } else {
          vm.exhibition()
          vm.positionIndex = specData[0]._source.position_index + '%';
          vm.retracementMaxIndex = specData[0]._source.retracement_max_index + '%';
          if (vm.myChartLeft) {
            vm.myChartLeft.setOption({
              series: [{
                data: [{
                    value: 100 - specData[0]._source.position_avg,
                    name: '平均仓位'
                  },
                  {
                    value: specData[0]._source.position_avg,
                    name: specData[0]._source.position_avg + '%'
                  }
                ]
              }]
            });
            vm.myChartRight.setOption({
              series: [{
                data: [{
                    value: 100 - specData[0]._source.retracement_max,
                    name: '最大回撤'
                  },
                  {
                    value: specData[0]._source.retracement_max,
                    name: specData[0]._source.retracement_max + '%'
                  }
                ]
              }]
            })
          } else {
            vm.$nextTick(() => {
              vm.myChartLeft = echarts.init(vm.$refs.mChartLeft);
              vm.myChartRight = echarts.init(vm.$refs.mChartRight);
              vm.myChartLeft.setOption(myOpe)
              vm.myChartLeft.setOption({
                series: [{
                  data: [{
                      value: 100 - specData[0]._source.position_avg,
                      name: '平均仓位'
                    },
                    {
                      value: specData[0]._source.position_avg,
                      name: specData[0]._source.position_avg + '%'
                    }
                  ]
                }]
              });
              vm.myChartRight.setOption(myOpe)
              vm.myChartRight.setOption({
                series: [{
                  data: [{
                      value: 100 - specData[0]._source.retracement_max,
                      name: '最大回撤'
                    },
                    {
                      value: specData[0]._source.retracement_max,
                      name: specData[0]._source.retracement_max + '%'
                    }
                  ]
                }]
              })
            })
          }
        }
      }
    }
  }
}
</script>
<style scoped>
.stockOpe {
  margin-bottom: 0.57rem;
}

.stockContent {
  text-align: center;
  overflow: hidden;
}

.describe {
  font-size: 0.1rem;
  margin-bottom: 0.35rem;
  text-align: center;
  color: #999;
}

.describe div {
  width: 50%;
  float: left;
}
</style>
